<script setup lang="ts">
/*
上拉加载 
  1:先完成一个基本接口请求，不考虑分页，完成数据存储与渲染
     a:定义api
     b：导入api
     c:调用api
     d:定义数据类型
     f:存储数据并渲染
  2：van-list
         v-model:loading:是否处于加载中
         finished:是否全部加载完成
         finished-text:加载完成后的提示
         @load:滚动条距离底部小于300时自动触发
            @load=()=>{
                a:调用接口
                b:数据要累加
                c:将loading的值改成false
                d：页码++
                f:如果所有数据都加载完成，将finished=true
            }
*/
import { ref } from 'vue'
import KnowledgeCard from './knowledge-card.vue'
import { patientHomeKnowledge } from '@/api/home'
import type { patientHomeKnowledgeApiRowsItem, homeType } from '@/types/home'
const props = defineProps<{
  type: homeType
}>()

const list = ref<patientHomeKnowledgeApiRowsItem[]>([])
const loading = ref(false)
const finished = ref(false)
let current = 1
const getData = async () => {
  const res = await patientHomeKnowledge({
    type: props.type,
    current: current,
    pageSize: 10
  })
  list.value.push(...res.data.rows)
  loading.value = false
  current++
  if (list.value.length >= res.data.total) {
    finished.value = true
  }
  console.log(res)
}
// getData()
</script>

<template>
  <div class="knowledge-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <knowledge-card v-for="i in list" :key="i.id" :item="i"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
